<template>
 <div>
     <detail-banner
     :sightName="sightName"
     :bannerImg="bannerImg"
     :gallaryImgs="gallaryImgs"
     ></detail-banner>
     <detail-header></detail-header>
     <detail-list :list="list"></detail-list>
     <div class="content"></div>
 </div>
</template>
<script>
import DetailBanner from "./components/banner"
import DetailHeader from "./components/header"
import DetailList from "./components/list"
import axios from 'axios'
 export default {
   name:"detail",
   data () {
     return {
       sightName:"",
       bannerImg:"",
       gallaryImgs:[],     
       list:[]
     }
   },
   methods:{
     getDetail(){
       axios.get("/api/detail.json?id="+this.$route.params.id).then(this.getDataSucc)
     },
     getDataSucc(res){
       res=res.data
       if(res.ret&&res.data){
         const data=res.data
          this.sightName=data.sightName
          this.bannerImg=data.bannerImg
          this.gallaryImgs=data.gallaryImgs
          this.list=data.categoryList
       }
     }
   },
   mounted(){
     this.getDetail()
   },
   components: {
       DetailBanner,
       DetailHeader,
       DetailList
   }
 }
</script>
<style lang="stylus" scoped>
  .content
    height 50rem
</style>
